<template>
  <div style="width: 200px">
    <Menu :data="data1" defaultActive="1"></Menu>
  </div>
  <div style="margin-top: 20px;width: 200px">
    <InfiniteMenu :data="data2" defaultActive="2"></InfiniteMenu>
  </div>
</template>

<script lang="ts" setup>
let data1 = [
  {
    name: '导航1',
    index: '1',
    icon: 'Document'
  },
  {
    name: '导航2',
    index: '2',
    icon: 'Document'
  },
  {
    name: '导航3',
    index: '3',
    icon: 'Document',
    children: [
      {
        name: '导航3-1',
        index: '3-1',
        icon: 'Document',
      },
      {
        name: '导航3-2',
        index: '3-2',
        icon: 'Document',
      }
    ]
  }
]
let data2 = [
  {
    name: '导航1',
    index: '1',
    icon: 'Document'
  },
  {
    name: '导航2',
    index: '2',
    icon: 'Document'
  },
  {
    name: '导航3',
    index: '3',
    icon: 'Document',
    children: [
      {
        name: '导航3-1',
        index: '3-1',
        icon: 'Document',
        children: [
          {
            name: '导航3-1-1',
            index: '3-1-1',
            icon: 'Document',
          },
          {
            name: '导航3-1-2',
            index: '3-1-2',
            icon: 'Document',
            children: [
              {
                name: '导航3-1-2-1',
                index: '3-1-2-1',
                icon: 'Document',
              }
            ]
          }
        ]
      },
      {
        name: '导航3-2',
        index: '3-2',
        icon: 'Document',
      }
    ]
  }
]
</script>

<style lang="scss" scoped>

</style>